/*
* © 2010 Autodata Solutions Company. All Rights Reserved
* This source code is the confidential and proprietary information of Autodata Solutions Company.
* The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
* without the prior written consent of Autodata Solutions Company.
*/
Ext.ns('net.autodata.compare.photos');
(function () {
	var DQ = Ext.DomQuery;
	
	var THUMBS_VIEWABLE = 5; 
	
	/**
	 * @class PhotoSelectorView
	 * @extends net.autodata.AbstractView
	 * @namespace net.autodata.compare.photos
	 */
	var View = Ext.extend(net.autodata.AbstractView, {
		
		templates: undefined,
		
		/**
		 * @property thumbnailsPanel
		 * @type net.autodata.compare.photos.ThumbnailsPanel
		 */
		thumbnailsPanel: undefined,
		
		/**
		 * The thickness of one side of the border that surrounds a thumbnail
		 * @property thumbBorderWidth
		 * @type int
		 */
		thumbBorderWidth: 2,
		
		/**
		 * @property thumbWidth
		 * @type int
		 */
		thumbWidth: 120,
		
		/**
		 * @property thumbHeight
		 * @type int
		 */
		thumbHeight: 80,
		
		selectedImage: undefined,
		
		acodes: undefined,
		
		constructor: function ()
		{
			
			this.addEvents({
				'thumbselected': true
			});
			
			View.superclass.ctor.apply(this, arguments);
		},
		
		init: function ()
		{
			View.superclass.init.apply(this, arguments);
			
			var panel = this.component;
			
			panel.getStore().on({
				'load': this.onStoreLoad,
				scope: this
			});
		},
		
		initTemplates: function ()
		{
			var ts = this.templates || {};
			
			if (!ts.mainTpl) {
				ts.mainTpl = new Ext.XTemplate(
					'<div class="photo-selector-view">',
						'<table border="0" cellpadding="0" cellspacing="0">',
							'<tr>',
								'<td class="selector-buttons">',
									'<div class="selector-buttons-wrap">',
										'<ul>',
											'<li class="btn-exterior-wrap"></li>',
											'<li class="btn-interior-wrap"></li>',
										'</ul>',
									'</div>',
								'</td>',
								'<td class="selector-prev"><div class="selector-prev-wrap"></div></td>',
								'<td class="selector-thumbs"><div class="viewport"><div class="selector-thumbs-wrap"></div></div></td>',
								'<td class="selector-next"><div class="selector-next-wrap"></div></td>',
							'</tr>',
						'</table>',
					'</div>',
					{
						compiled: true,
						disableFormats: true
					}
				);
			}
						
			this.templates = ts;
		},
		
		render: function ()
		{
			var panel = this.component;
			this.templates.mainTpl.overwrite(panel.el.dom, {});
			
			var dom = panel.el.dom;
			
			panel.exteriorButton.render(DQ.selectNode('ul li.btn-exterior-wrap', dom));
			panel.interiorButton.render(DQ.selectNode('ul li.btn-interior-wrap', dom));
			
			panel.prevButton.render(DQ.selectNode('.selector-prev-wrap', dom));
			panel.nextButton.render(DQ.selectNode('.selector-next-wrap', dom));
		},
		
		selectPrevious: function ()
		{	
			var thumbs = this.thumbnailsPanel.getThumbnails();			
			var idx = this.selectedImage.thumbIndex - 1;
			if (idx < 0) {
				idx = thumbs.length - 1;
			}
			
			this.selectImage(thumbs[idx]);
		},
		
		selectNext: function ()
		{
			var thumbs = this.thumbnailsPanel.getThumbnails();
			var idx = this.selectedImage.thumbIndex + 1;
			if (idx >= thumbs.length) {
				idx = 0;
			}
			this.selectImage(thumbs[idx]);
		},
		
		selectFirstByType: function (imageType)
		{
			var thumbs = this.thumbnailsPanel.getThumbnails();
			var index = this.thumbIndicies[imageType];
			this.selectImage(thumbs[index !== undefined ? index : 0]);
		},
		
		/**
		 * @private
		 */
		onStoreLoad: function (store)
		{	
			//Clean up the previous data
			if (this.thumbnailsPanel) {
				this.thumbnailsPanel.destroy();
				delete this.thumbnailsPanel;
			}
			
			delete this.selectedImage;
			
			var dom = this.component.el.dom;
			var renderTo = DQ.selectNode('.selector-thumbs-wrap', dom);
			var items = [];
			
			var thumbIndicies = {
				'exterior': undefined,
				'interior': undefined
			};
			
			//Generate an IOFImage for each thumbnail
			store.each(function (record, index) {
				
				var imageName = record.get('imageName');
				var shotId = record.get('shotId');
				var imageType = record.get('imageType');
				
				//Keep track of where each image type starts
				if (thumbIndicies[imageType] === undefined) {
					thumbIndicies[imageType] = index;
				}
				
				var iofImg = new net.autodata.IOFImage({
					usePng: false,
					
					imageName: imageName,
					imageType: imageType,
					imageHeight: this.thumbHeight,
					imageWidth: this.thumbWidth,
					shotId: shotId,
					
					thumbIndex: index,
					
					listeners: {
						'select': this.onIOFSelect,
						scope: this
					},
					
					handler: this.onIOFClick,
					scope: this
				});
				
				items.push(iofImg);
				
			}, this);
			
			this.thumbIndicies = thumbIndicies;
			
			this.thumbnailsPanel = new net.autodata.compare.photos.ThumbnailsPanel({
				height: this.thumbHeight + (this.thumbBorderWidth * 2),
				width: (this.thumbWidth + (this.thumbBorderWidth *2)) * items.length,
				thumbnails: items,
				renderTo: renderTo,
				style: {'position': 'absolute', 'left': 0, 'top': 0, 'white-space': 'nowrap'}
			});	
			
			this.selectedImage = items[0];
			if (this.selectedImage) {
				this.selectedImage.select();
			}
		},
		
		/**
		 * @private
		 */
		selectImage: function (iofImage)
		{
			if (this.selectedImage) {
				this.selectedImage.deselect();
			}
			this.selectedImage = iofImage;
			iofImage.select();
		},
		
		/**
		 * @private
		 */
		scrollTo: function (iofImage)
		{
			var index = iofImage.thumbIndex;
			var total = this.component.getStore().getCount();
			
			if (total < THUMBS_VIEWABLE) {
				return;
			}
			
			var em = iofImage.el.findParentNode('em', 1, true);
			
			var leftSide = Math.ceil(THUMBS_VIEWABLE/2 -1);
	    	var rightSide = (total -1) - Math.floor(THUMBS_VIEWABLE/2) - leftSide;
	    	
	    	index = Math.min(Math.max(0, index - leftSide), rightSide);
	    	this.thumbnailsPanel.moveX(index * em.getWidth() * -1);
		},
		
		/**
		 * @private
		 */
		onIOFSelect: function (iofImage)
		{
			this.scrollTo(iofImage);
			this.fireEvent('thumbselected', iofImage);
		},
		
		/**
		 * @private
		 */
		onIOFClick: function (iofImage)
		{
			this.selectImage(iofImage);
		},
		
		/**
		 * @private
		 */
		onDestroy: function ()
		{
			View.superclass.onDestroy.apply(this, arguments);
			var panel = this.component;
			panel.getStore().un('load', this.onStoreLoad, this);
		}
	});
	
	net.autodata.compare.photos.PhotoSelectorView = View;
	
})();